<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">分公司新建</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100">
          <el-button
            class="btn-success width100"
            type="primary"
            @click="submitForm()"
          >确定</el-button>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" label-width="140px" class="mt30">
        <el-row>
          <el-col :span="12">
            <el-form-item label="编码:">
              <el-input placeholder="系统自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司名称:" prop="orgName" class="icon-star">
              <el-input v-model="form.orgName" placeholder="请输入公司名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="组织机构代码:" prop="orgCode" class="icon-star">
              <el-input v-model="form.orgCode" placeholder="请输入组织机构代码" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型:" prop="type">
              <el-select v-model="form.type" style="width:100%;" placeholder="请选择">
                <el-option label="公司" value="1"></el-option>
                <el-option label="生产企业" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否平台公司:" prop="productOrNot">
              <el-radio-group v-model="form.productOrNot">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="法人:" prop="leader" class="icon-star">
              <el-input v-model="form.leader" placeholder="请输入法人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人电话:" prop="leaderPhone">
              <el-input v-model="form.leaderPhone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人:" prop="contact" class="icon-star">
              <el-input v-model="form.contact" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话:" prop="contactNumber" class="icon-star">
              <el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="地址:" class="icon-star">
              <el-select v-model="form.province" placeholder="请选择省份" @change="onProvince" class="mr10 width180">
                <el-option v-for="(item,index) of provinceArr" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
              <el-select v-model="form.city" placeholder="请选择市" @change="onCity" class="mr10 width180">
                <el-option v-for="(item,index) of cityArr" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
              <el-select placeholder="请选择区/县" v-model="form.region" @change="onZone" class="mr10 width180">
                <el-option v-for="(item,index) of regionArr" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
              <el-input v-model="form.contactAddress" placeholder="请输入详细地址" style="width:30%;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号:" prop="userName" class="icon-star">
              <el-input v-model="form.userName" placeholder="请输入账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态:" prop="status">
              {{ form.status == '1' ? '禁用' : '启用' }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="密码:" prop="password" class="icon-star">
              <el-input v-model="form.password" placeholder="请输入密码" type="password" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码验证:" prop="rePassword" class="icon-star">
              <el-input v-model="form.rePassword" placeholder="" type="password" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { organizationAdd } from "@/api/system/organization/organization"
import { province } from '@/commonJs/linkage.js'
export default {
  name: "organizationAdd",
  data(){
    return {
      form: {
        orgName: '', // 公司名称
        orgCode: '', // 组织机构代码
        type: '1', // 类型
        productOrNot: '0', // 是否平台公司
        leader: '', // 法人
        leaderPhone: '', // 法人电话
        contact: '', // 联系人
        contactNumber: '', // 联系电话
        province: '', //省
        city: '', //市
        region: '', //区/县
        contactAddress: '',// 联系地址
        userName: '', // 账号
        password: '', // 密码
        rePassword: '', // 验证密码
        status: '0', // 状态 0禁用 1启用
        remark: '', // 备注
      },
      provinceArr: [],
      cityArr: [],
      regionArr: [],
    }
  },
  created() {
    this.provinceArr = province
  },
  methods: {
    // 省份
    onProvince(val){
      this.cityArr = []
      this.regionArr = []
      this.form.city = ''
      this.form.region = ''
      this.form.contactAddress = ''
      for (let item of this.provinceArr) {
        if (val == item.name) {
          this.cityArr = item.children
        }
      }
    },
    // 城市
    onCity (val) {
      this.regionArr = []
      this.form.region = ''
      this.form.contactAddress = ''
      for (let item of this.cityArr) {
        if (val == item.name) {
          this.regionArr = item.children
        }
      }
    },
    // 区/县
    onZone(val){
      this.form.contactAddress = ''
    },
    // 提交数据
    submitForm() {
      if(this.form.orgName == ''){
        this.$modal.msgError('公司名称不能为空！')
      }else if(this.form.orgCode == ''){
        this.$modal.msgError('组织机构代码不能为空！')
      }else if(this.form.leader == ''){
        this.$modal.msgError('法人不能为空！')
      }else if(this.form.contact == ''){
        this.$modal.msgError('联系人不能为空！')
      }else if(this.form.contactNumber == ''){
        this.$modal.msgError('联系电话不能为空！')
      }else if(this.form.userName == ''){
        this.$modal.msgError('账号不能不空！')
      }else if(this.form.password == ''){
        this.$modal.msgError('密码不能为空！')
      }else if(this.form.password !== this.form.rePassword){
        this.$modal.msgError('两次密码输入不一致！')
      }else{
        this.$modal.loading("正在提交")
        organizationAdd(this.form).then(res => {
          if(res.code == 200){
            this.form = {}
            this.$tab.closeOpenPage({ path: "/setting/organization/list" })
            this.$modal.msgSuccess("新建成功")
            this.$modal.closeLoading()
          }
        })
      }
    }
  }
}
</script>